{extend name="extra@index/base" /}
{block name="title"}收货地址管理{/block}

{block name="css"}

{/block}


{block name='page'}
<style>/**页面css写在这里*/
.icon-xitongfanhui:before {
    padding-right: 0.75rem;
}

.card-header {
    background: #0099FF;
    color: white;
}

.address-tips {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
}

.iconfont {
    font-size: 0.85rem;
}

.city {
    color: #aaa;
    font-size: .6rem;
    padding-left: .1rem;
}

.pep {
    font-size: .8rem;
}
</style>
<!-- 页面开始 -->
<div class="content" id="vue">
    <div class="card-header">
        <span class="addressmanage"><span class="iconfont icon-xitongfanhui"
                                          onclick="back()"></span>管理收货地址</span>
        <a href="/my/index/newaddress?from={:input('from')}" style="color: #fff;">+ 新增</a>
    </div>
    <div class="list-block media-list card">
        <ul>
            <li v-for="a in address" @click="openS(a.Id)">
                <label class="label-checkbox item-content">
                    <input type="radio" name="my-radio" :value="a.Id" v-model="defaultId">
                    <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title city">{{a.City}}</div>
                        </div>
                        <div class="item-title-row pep">
                            <div class="item-title"><i class="iconfont icon-geren"></i>{{a.Name}}</div>
                            <div class="item-after"><i class="iconfont icon-shouji"></i>{{a.Phone}}</div>
                        </div>
                        <div class="item-title-row">
                            <div class="item-title"><i class="iconfont icon-dizhi1"></i>{{a.Address}}</div>
                        </div>

                    </div>
                </label>
            </li>

        </ul>
    </div>


    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader" v-if="!load">
        <div class="preloader"></div>
    </div>


    <div class="address-tips"><p>最多为你保存10个常用地址</p>
        <p>还需新增，请删除或修改以上地址</p></div>

</div>
<script>


    vm = new Vue({
        el: '#vue',
        data: function () {
            return {
                address: [],
                defaultId: 0,
                load: false
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                // 代码保证 this.$el 在 document 中

                $.showIndicator()
                var _this = this;
                $.get('/api/my/address', function (ret) {

                    if (ret.code > 0) {

                        _this.address = ret.msg;
                        _this.defaultId = ret.default;
                        _this.load = true;
                    } else {
                        $.alert(ret.msg)
                    }


                    $.hideIndicator()

                })
            })
        },
        watch: {
            defaultId: function (v, o) {
                if (o) {
                    //vm.openS(v)
                }
            }
        },
        methods: {
            openS: function (id) {
                var _this = this;
                window.temp = vm.defaultId;
                var buttons1 = [
                    {
                        text: '请选择',
                        label: true
                    },
                    {
                        text: '删除',
                        bold: true,
                        color: 'danger',
                        onClick: function () {
                            $.alert("确定删除该地址吗?", function () {
                                _this.doAddress(id, 1)
                            });
                        }
                    },
                    {
                        text: '编辑',
                        onClick: function () {
                            $.router.load('/my/index/newaddress?id=' + id, true, 'right')
                        }
                    },
                    {
                        text: '设为默认地址',
                        onClick: function () {
                            _this.doAddress(id, 2)
                        }
                    }
                ];
                var buttons2 = [
                    {
                        text: '取消',
                        bg: 'danger',
                        onClick: function () {
                            vm.defaultId = window.temp
                        }
                    }
                ];
                var groups = [buttons1, buttons2];
                $.actions(groups);


                setTimeout(function () {
                    vm.defaultId = temp
                }, 1);

            },
            doAddress: function (id, type) {
                $.showIndicator();
                $.post('/api/my/doAddress', {
                    id: id, type: type
                }, function (ret) {
                    $.hideIndicator();
                    $.toast(ret.msg)

                    if (ret.code == 1) {

                        for (var i = 0; i < vm.address.length; i++) {
                            if (vm.address[i].Id == id) {
                                vm.address.splice(i, 1)
                            }
                        }

                    } else if (ret.code == 2) {
                        vm.defaultId = id
                    }
                })

            }
        }
    })


    function back() {
        var from = '{:input("from")}';
        if (from) {
            $.router.load(from, true, 'left');
        } else {
            $.router.load('/my/', true, 'left');
        }


    }

</script>


<!-- 页面结束 -->
{/block}

{block name="base"}
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal theme-dark" id='panel-left'>
    <!-- 左边侧栏开始 -->

    <!-- 左边侧栏结束 -->
</div>
{/block}

{block name="js"}

{/block}